<template>
  <!-- 案件对比组件 -->
  <div class="ratio" v-show="show">
    <div class="box">
      <div class="head">
        <span class="title">对比栏</span>
        <span class="info"
          ><i class="el el-icon-warning"></i> 最大对比案件数3件</span
        >
      </div>
      <div class="body">
        <div class="body-left">
          <div class="item" v-for="(item, index) in ratioList" :key="index">
            <i class="el el-icon-close" @click="remove(item)"></i>
            <div class="msg">
              <span class="left">专利号：</span>
              <span class="right">{{ item.申请号 }}</span>
            </div>
            <div class="msg">
              <span class="left">专利名称：</span>
              <span class="right">{{ item.发明创造名称 }}</span>
            </div>
          </div>
        </div>
        <div class="body-right">
          <el-button type="primary" size="small" @click="compareCases">
            <i class="fa fa-exchange" aria-hidden="true"></i>
            开始对比
          </el-button>
          <el-button size="small" @click="isClear">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
            清空对比栏
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { contrastCases } from "@api/details";
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    ratioList: {
      type: Array,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
    isClear() {
      this.$emit("update:ratioList", []);
      this.$emit("update:show", false);
      this.$parent.checkedList = [];
      this.$parent.checkAll = false;
    },
    remove(item) {
      console.log(item);
      let filterData = this.list.filter(data => !(data.申请号 === item.申请号));
      this.$emit("update:ratioList", filterData);

      console.log(filterData);
      this.$parent.checkedList = filterData.map(item => item.申请号);
      this.$parent.checkAll = false;
    },
    //开始对比
    async compareCases() {
      console.log(this.ratioList);
      let params = [];
      if (this.ratioList.length <= 1) {
        this.$message.warning("对不起,请先选中至少两件案件");
        return;
      } else if (this.ratioList.length > 3) {
        this.$message("对不起，最多添加3个案件信息。");
        return;
      }
      this.ratioList.map(item =>
        params.push({
          anjianbh: item.申请号,
          juedingh: item.决定号,
          anjianlx: "waiguan"
        })
      );
      sessionStorage.setItem("ratioList", JSON.stringify(this.ratioList));
      const { code, data } = await contrastCases(params);
      if (code == 200) {
        console.log(data);
        sessionStorage.setItem("ratioDetail", JSON.stringify(data));

        this.$router.push({
          path: "/pages/ratioDetail"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ratio {
  width: 100%;
  height: 186px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ebeef5;
  z-index: 2;
  border-top: 1px solid #ebeef5;
  .box {
    width: 1200px;
    margin: 0 auto;
    height: 100%;

    .head {
      width: 100%;
      display: flex;
      margin: 20px 0;
      height: 20px;
      border-left: 4px solid #2d54b8;
      box-sizing: border-box;
      padding-left: 10px;

      .title {
        font-size: 16px;
        font-weight: bolder;
        margin-right: 20px;
        display: inline-block;
      }

      .info {
        font-size: 14px;
        line-height: 16px;
        color: #c0c4cc;
      }
    }

    .body {
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: space-between;

      .body-left {
        border-right: 1px solid #dcdfe6;
        height: 110px;
        .item {
          width: 333px;
          background-color: #fff;
          border-radius: 10px;
          position: relative;
          padding: 20px 20px 0 20px;
          box-sizing: border-box;
          display: inline-block;
          margin-right: 20px;

          .el-icon-close {
            font-weight: bolder;
            font-size: 20px;
            color: #909399;
            position: absolute;
            top: 10px;
            right: 10px;
          }

          .msg {
            width: 100%;
            font-size: 14px;
            color: #909399;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            span {
              display: inline-block;
            }

            .left {
              width: 70px;
              text-align: right;
              float: left;
            }
            .right {
              float: right;
              width: calc(100% - 80px);
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      .body-right {
        height: 110px;
        padding: 10px 0px 10px 20px;
        box-sizing: border-box;
        width: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .el-button {
          width: 100%;
          margin: 0;
          font-size: 14px;

          .fa {
            font-size: 16px;
            margin-right: 6px;
          }
        }
      }
    }
  }
}
</style>
